<template>
    <div class="page home-ui">
        <ScrollPull @onDown="onDown">
            <cube-slide ref="slide" :data="bannerList">
                <cube-slide-item v-for="(item, index) in bannerList" :key="index">
                    <img style="width: 100%;height: 3.2rem" :src="item.img"/>
                </cube-slide-item>
            </cube-slide>
            <div class="money-box">
                <div class="money-item">
                    <div class="money-txt" :style="{'color': curNavId == 1? '#5461eb':'#888'}" @click="loanProductTap(1)">贷款产品</div>
                </div>
                <div class="money-item">
                    <div class="money-txt" @click="loanProductTap(2)" :style="{'color': curNavId == 2? '#5461eb':'#888'}">信用卡产品</div>
                </div>
                <div class="money-item">
                    <div class="money-txt" @click="loanProductTap(3)" :style="{'color': curNavId == 3? '#5461eb':'#888'}">一键代理</div>
                </div>
            </div>
            <div class="new-box">
                <div class="new-title">新品推荐</div>
                <div class="new-item">
                    <div
                            class="new-itembox"
                            v-for="(item, index) in newList"
                            :key="index"
                            @click="goFindLoanTap"
                    >
                        <img style="width: 45px;height: 45px;" :src="item.img"/>
                        <div class="new-content">
                            <div class="new-contenttitle">{{ item.content.title }}</div>
                            <div class="new-info">
                                奖金<span>{{ item.content.money }}</span>
                            </div>
                            <div class="new-term">{{ item.content.term }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="new-box">
                <div class="new-title">产品列表</div>
                <div class="goods-list" v-for="(item, index) in organList" :key="index" @click="goDetailsTap(item.id)">
                    <div style="width: 16%;">
                        <img
                                style="width: 45px;height: 45px;margin-left: 0.4rem;"
                                :src="getImgUrl(item.logo)"
                        />
                    </div>
                    <div class="media-box">
                        <div class="media-content">
                            <div class="new-contenttitle">{{ item.name }}</div>
                            <div class="new-info">奖金{{ item.dayPer }}%</div>
                            <div class="new-term">{{ item.keyword }}</div>
                        </div>
                        <div class="new-peopleCount">{{ item.applyNumber }}人申请</div>
                    </div>
                </div>
            </div>
        </ScrollPull>
    </div>
</template>
<script>
    import ScrollPull from "../../components/Scroll/scrollPull";
    import {getGoodsList} from "../../api/home"
    export default {
        components: {
            ScrollPull
        },
        data() {
            return {
                page: 1,
                limit: 10,
                curNavId: null,
                organList: [

                ],
                newList: [
                    {
                        img:
                            "http://ryj.yunhushuju.com/Upload/image/20190509/5cd3af1628f8d.png",
                        content: {
                            title: "小爱钱包",
                            money: "8.00%",
                            term: "申请5元"
                        }
                    },
                    {
                        img:
                            "http://ryj.yunhushuju.com/Upload/image/20190118/5c40cbc63d43b.png",
                        content: {
                            title: "小爱钱包",
                            money: "8.00%",
                            term: "申请5元"
                        }
                    },
                    {
                        img:
                            "http://ryj.yunhushuju.com/Upload/image/20190509/5cd39f439b7d1.jpg",
                        content: {
                            title: "小爱钱包",
                            money: "8.00%",
                            term: "申请5元"
                        }
                    },
                    {
                        img:
                            "http://ryj.yunhushuju.com/Upload/image/20180711/5b45624d51aae.png",
                        content: {
                            title: "小爱钱包",
                            money: "8.00%",
                            term: "申请5元"
                        }
                    }
                ],
                bannerList: [
                    {
                        img: require("./img/homeBer.png")
                    }
                ]
            };
        },
        created() {
          this.onDown()
        },
        methods: {
            getImgUrl(url) {
                return process.env.VUE_APP_IMAGE_DOMAIN + url
            },
            onDown: function () {
                getGoodsList(this.page,this.limit).then(res=> {
                    if (res.data.length > 0) {
                        this.organList = this.organList.concat(res.data)
                        this.page++
                    }
                })
            },
            loanProductTap: function (id) {

                if (id == 1) {
                    this.curNavId = 1
                }
                if (id == 2) {
                    this.curNavId = 2
                }
                if (id == 3) {
                    this.curNavId = 3
                }
            },
            goDetailsTap: function (id) {
                this.$router.push({
                    path: "/details",
                    query: {
                        id: id
                    }
                })
            },
            goFindLoanTap: function () {
                this.$router.push({
                    path: "/findloan"
                })
            }
        }
    };
</script>
<style type="text/stylus" lang="stylus" scoped>
    .home-ui
        .cube-scroll-list-wrapper
            overflow hidden;
            padding-bottom 1.43rem;
            padding-top 1.43rem;
</style>
<style scoped type="text/stylus" lang="stylus">
    .money-box
        display flex;
        justify-content space-between;

        .money-item
            width 33%;
            height 0.8rem;
            border-right 1px solid #f0f0f0;
            text-align center;
            line-height 0.8rem;
            margin 0.2rem 0;

            .money-txt
                font-size: 16px;
                color #888;

    .new-box
        border-top 8px #e5e5e5 solid;
        background-color #fff;

        .new-title
            border-bottom: 1px solid #eee;
            padding: 10px;
            font-size 16px;

        .goods-list
            width 100%;
            display flex;
            justify-content start;
            align-items center;
            border-bottom 1px #e5e5e5 solid;
            padding 0.4rem 0;

            .media-box
                width 76%;
                margin-left 0.4rem;
                height 1.5rem;
                display flex;
                justify-content space-between;

                .media-content
                    .new-contenttitle
                        font-weight: 400;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-wrap: break-word;
                        word-break: break-all;

                    .new-info
                        font-size 12px;
                        color: #4a4a4a;
                        line-height 0.6rem;

                    .new-term
                        height: 38px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        font-size: 10px;
                        color: #606060;

                .new-peopleCount
                    font-size 14px;

        .new-item
            display flex;
            justify-content space-between;
            flex-wrap wrap;

            .new-itembox
                width 41.5%;
                padding 0 4%;
                border-left 1px #e5e5e5 solid;
                border-bottom 1px #e5e5e5 solid;
                min-height 3rem;
                display flex;
                justify-content start;
                align-items center;

                .new-content
                    margin-left 0.3rem;

                    .new-contenttitle
                        font-weight: 400;
                        margin-top 0.4rem;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-wrap: break-word;
                        word-break: break-all;

                    .new-info
                        font-size 12px;
                        color: #4a4a4a;
                        line-height 0.6rem;

                    .new-term
                        height: 38px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        font-size: 10px;
                        color: #606060;
</style>
